<!-- 在main_ui.html中添加新的页面结构 -->
<style>
    .rating-section {
        margin-top: 20px;
    }

    .star-rating {
        font-size: 24px;
        margin-top: 10px;
    }

    .star {
        cursor: pointer;
        color: #ddd;
        margin-right: 5px;
    }

    .star.active {
        color: #ffc107;
    }
    .charInf_bar{
        width: 300px;
        height: 160px;
        background-color: white;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        border-radius: 20px;
        padding: 10px;
    }
    .charInf_bar a{
        text-decoration: none;
    }
    /* .char_works_container {
        padding: 40px;
    } */
    
    .works_list_bar {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .work_card {
        width: 300px;
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);
        /* width: calc(33% - 15px); */
        display: flex;
        transition: all 0.3s ease;
    }
    
    .work_card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px 0 rgba(31, 38, 135, 0.1);
    }
    
    .work_cover {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        margin-right: 20px;
    }
    
    .work_info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .work_title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
    }
    
    .work_author {
        color: #666;
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .work_desc {
        color: #999;
        font-size: 13px;
        margin-bottom: auto;
    }
    
    .work_actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #eee; /* 添加上边线分隔 */
    }

    .download_btn {
        padding: 8px 16px;
        border-radius: 20px;
        background-color: #00d1ad;
        color: white;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 209, 173, 0.2); /* 添加柔和阴影 */
    }

    .download_btn:hover {
        background-color: #00bfa5; /* 稍微变深的颜色 */
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 209, 173, 0.3); /* 悬浮时增强阴影 */
    }
    .had_download_btn {
        padding: 8px 16px;
        border-radius: 20px;
        background-color: #cccccc; /* 灰色背景表示不可操作 */
        color: white;
        cursor: not-allowed; /* 鼠标悬停时显示为禁止状态 */
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        box-shadow: none; /* 去除阴影以减少交互感 */
        opacity: 0.7; /* 可选：降低透明度进一步表明不可点击 */
    }
    
    /* 详情弹窗样式 */
    .work_detail_modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .work_detail_content {
        background: white;
        border-radius: 15px;
        width: 600px;
        height: 80vh;
        overflow-y: auto;
        position: relative;
        padding: 30px;
    }
    
    .work_detail_close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
        color: #999;
    }
    
    .work_detail_inner {
        display: flex;
        gap: 20px;
    }
    
    .work_detail_cover {
        width: 180px;
        height: 180px;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
    }
    
    .work_detail_info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .rating_section {
        margin-top: 20px;
    }
    
    .rating_stars {
        display: flex;
        margin: 15px 0;
    }
    
    .star {
        font-size: 24px;
        color: #ccc;
        cursor: pointer;
        margin-right: 10px;
        transition: color 0.3s;
    }
    
    .star.active,
    .star.hover {
        color: #ffd700;
    }
    
    .rating_text {
        color: #666;
        margin-bottom: 15px;
    }
    
    .rate_button {
        padding: 10px 20px;
        border-radius: 20px;
        background-color: #00d1ad;
        color: white;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        border: none;
        transition: all 0.3s ease;
    }
    
    .rate_button:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }
</style>

<!-- 添加新页面到HTML中 -->
<div class="char_works_page" id="char_works_page">
    <div class="char_works_container">
        <!-- <h2 style="color: #00d1ad; margin-bottom: 20px;">角色互动作品库</h2> -->
        <div class="works_list_bar" id="works_list_bar">
            <!-- 作品卡片会动态加载到这里 -->
        </div>
    </div>
    
    <!-- 详情弹窗 -->
    <div class="work_detail_modal" id="work_detail_modal">
        <div class="work_detail_content">
            <span class="work_detail_close" onclick="closeWorkDetail()">&times;</span>
            <div class="work_detail_inner" id="work_detail_inner">
                <!-- 动态内容 -->
            </div>
            <!-- <div class="rating-section">
                <p>给这个作品评分:</p>
                <div class="star-rating">
                    <span class="star" data-rating="1">☆</span>
                    <span class="star" data-rating="2">☆</span>
                    <span class="star" data-rating="3">☆</span>
                    <span class="star" data-rating="4">☆</span>
                    <span class="star" data-rating="5">☆</span>
                </div>
            </div> -->
            <iframe id="comment_iframe" style="width: 100%;height: 100%;border: none;"></iframe>
        </div>
    </div>
</div>

<script>
// 在ui.js中添加相关功能代码
const stars = document.querySelectorAll('.star');
async function load_char_works() {
    let had_loadCharList = await parent.window.pywebview.api.get_webChar()
    had_loadCharList = had_loadCharList.data
    try {
        // 获取作品数据
        const response = await fetch('http://127.0.0.1:8001/content/get/wpp_char');
        const data = await response.json();
        
        if (data.success) {
            // 获取作品列表容器
            const worksListBar = document.getElementById('works_list_bar');
            worksListBar.innerHTML = ''; // 清空现有内容
            
            // 遍历数据并创建卡片
            data.data.forEach(work => {
                // 创建作品卡片
                const workCard = document.createElement('div');
                workCard.className = 'work_card';
                if(work.id in had_loadCharList){
                    if(Number(had_loadCharList[work.id])<work.v){
                        action = "更新"
                        class_name = "download_btn"
                    }else{
                        action = "已下载"
                        class_name = "download_btn"
                    }
                }else{
                    action = "下载"
                    class_name = "download_btn"
                }
                
                // 卡片内容
                workCard.innerHTML = `
                    <div class="work_cover" style="background-image: url('${work.img}');"></div>
                    <div class="work_info">
                        <div>
                            <div class="work_title">${work.title}</div>
                            <div class="work_author">作者：${work.author.name}</div>
                            <div class="work_desc">${work.content.introduce.substring(0, 60)}...</div>
                        </div>
                        <div class="work_actions">
                            <button class="${class_name}" onclick="showWork_detail('${work.id}')">${action}</button>
                        </div>
                    </div>
                `;
                
                // 添加到列表
                worksListBar.appendChild(workCard);
            });
            parent.document.getElementById("cil_bar").style.display = "none"
            parent.document.getElementById("char_web_iframe").style.display = "block";
        } else {
            parent.document.getElementById("char_web_iframe").style.display = "none";
            parent.pack_charRES({"len":0},"web")
            parent.mdui_log('获取作品失败: ' + data.msg);
        }
    } catch (error) {
        parent.document.getElementById("char_web_iframe").style.display = "none";
        parent.pack_charRES({"len":0},"web")
        parent.mdui_log('网络错误: ' + error);
    }
}
async function showWork_detail(workId) {
   if(window.parent.pywebview){
        window.parent.showWorkDetail(workId);
   }else{
        showWorkDetail(workId)
   }
}
async function showWorkDetail(workId) {
    try {
        // 获取作品详细信息
        const response = await fetch(`http://127.0.0.1:8001/content/get/wpp_char?cid=${workId}`);
        const data = await response.json();
        let had_loadCharList = await parent.window.pywebview.api.get_webChar()
        had_loadCharList = had_loadCharList.data
        if (data.success) {
            const work = data.data[0];
            if(workId in had_loadCharList){
                if(Number(had_loadCharList[workId])<work.v){
                    action = "更新"
                    class_name = "download_btn"
                    dl_action = `download_char('${workId}')`
                }else{
                    action = "已下载"
                    class_name = "had_download_btn"
                    dl_action = ""
                }
            }else{
                action = "下载作品"
                class_name = "had_download_btn"
                dl_action = `download_char('${workId}')`
            }
            
            // 创建详细信息内容
            const detailContent = document.getElementById('work_detail_inner');
            detailContent.innerHTML = `
                <div class="work_detail_cover" style="background-image: url('${work.img}');"></div>
                <div class="work_detail_info">
                    <div>
                        <h3>${work.title}</h3>
                        <p>作者：${work.author.name}</p>
                        <p class="rating_text">下载量：${work.view_data.collect}</p>
                        <p class="rating_text">简介：${work.content.introduce}</p>               
                        <button class="${class_name}" onclick="${dl_action}">${action}</button>
                    </div>
                </div>
            `;
            
            // 显示弹窗
            document.getElementById("comment_iframe").src = `http://127.0.0.1:8001/comment?content_id=${workId}`
            document.getElementById('work_detail_modal').style.display = 'flex';
        } else {
            parent.mdui_log('获取作品详情失败: ' + data.msg);
        }
    } catch (error) {
        parent.mdui_log('网络错误: ' + error);
    }
}

function closeWorkDetail() {
    document.getElementById('work_detail_modal').style.display = 'none';
}

function setupRatingStars(workId) {
    const starsContainer = document.getElementById(`rating_stars_${workId}`);
    const ratingText = starsContainer.nextElementSibling.querySelector('.rating_text');
    
    // 鼠标悬停效果
    starsContainer.addEventListener('mouseover', function(e) {
        if (e.target.classList.contains('star')) {
            const rating = parseInt(e.target.dataset.rating);
            highlightStars(this, rating);
        }
    });
    
    // 鼠标离开恢复原来状态
    starsContainer.addEventListener('mouseout', function() {
        resetStars(this);
    });
    
    // 点击评分
    starsContainer.addEventListener('click', async function(e) {
        if (e.target.classList.contains('star')) {
            const rating = parseInt(e.target.dataset.rating);
            highlightStars(this, rating);
            ratingText.textContent = `评分：您评了 ${rating} 分`;
            
            // 调用评分接口
            try {
                const result = await rank_work(workId, rating);
                if (!result.success) {
                    mdui_log('评分失败: ' + result.msg);
                }
            } catch (error) {
                mdui_log('评分失败: ' + error);
            }
        }
    });
}

function highlightStars(container, rating) {
    const stars = container.querySelectorAll('.star');
    stars.forEach(star => {
        const starRating = parseInt(star.dataset.rating);
        if (starRating <= rating) {
            star.classList.add('active');
        } else {
            star.classList.remove('active');
        }
    });
}

function resetStars(container) {
    // 这里可以实现根据实际评分恢复星级显示
    const activeStar = container.querySelector('.star.active');
    if (activeStar) {
        const rating = parseInt(activeStar.dataset.rating);
        highlightStars(container, rating);
    } else {
        const stars = container.querySelectorAll('.star');
        stars.forEach(star => {
            star.classList.remove('active');
        });
    }
}

// 模拟rank_work函数
async function rank_work(cid, score) {
    // 这里应该是实际的API调用
    console.log(`正在为作品 ${cid} 提交评分 ${score}/5`);
    
    // 模拟API响应
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ success: true, msg: '评分成功' });
        }, 500);
    });
}
load_char_works()
</script>
<script>
    // 重置星星评分
    function resetStars() {
        stars.forEach(star => {
            star.textContent = '☆';
            star.classList.remove('active');
        });
    }
    function ratePack(rating) {
        if (!currentPackId) return;
        
        // 调用评分API
        rank_work(currentPackId, rating);
    }

    // // 事件监听
    // closeModal.addEventListener('click', closeModalHandler);
    // downloadBtn.addEventListener('click', downloadPack);
    
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = parseInt(this.dataset.rating);
            selectedRating = rating;
            
            // 更新星星显示
            stars.forEach((s, index) => {
                if (index < rating) {
                    s.textContent = '★';
                    s.classList.add('active');
                } else {
                    s.textContent = '☆';
                    s.classList.remove('active');
                }
            });
            
            // 提交评分
            ratePack(rating);
        });
    });
    // 初始加载
    // loadPacks();
</script>